در این آموزش ، یک ابزارک وردپرس برای نمایش وضعیت آب و هوای فعلی برای یک مکان مشخص ایجاد خواهیم کرد. برای این کار ما از API عالی Weather Underground استفاده خواهیم کرد. می توانید در اینجا برای یک حساب رایگان ثبت نام کنید یا می توانید برای دریافت یک حساب حرفه ای اقدام کنید.

ثبت نام

پس از ثبت نام برای کلید API خود ، باید چیزی مانند موارد زیر را مشاهده کنید. برای پرس و جو از API ، ما فقط به کلید API احتیاج داریم. WI Wunderground از OAuth برای تأیید اعتبار درخواست ها استفاده نمی کند ، ما فقط کلید را در URI درخواست خود قرار می دهیم.

ایجاد ابزارک

اولین کاری که باید انجام دهیم افزودن متا نظرات افزونه وردپرس است. به ما این امکان را می دهد تا ابزارک را از طریق داشبورد به عنوان یک افزونه فعال کنیم. اگر در حال نوشتن یک تم سفارشی هستید ، می توانید کد نهایی ویجت را در  functions.php خود قرار دهید یا با استفاده از require_once یا include_once  آنرا فراخوانی کنید.

/*
Plugin Name: Wunderground Widget

Plugin URI: http://schnittger.me

Description: A Widget for displaying the current weather using the Wunderground API

Version: 1.0

Author: Jonathan Schnittger

Author URI: http://schnittger.me

License: GPL2

*/

در مرحله بعدی ، ما باید کلاس پایه ابزارک خود را ایجاد کنیم. ابزارک ها در وردپرس همه کلاس WP_Widget را گسترش می دهند. 4 عملکرد وجود دارد که همه ابزارک ها باید اجرا کنند:

• سازنده (__construct) ، ابزارک را مقداردهی اولیه می کند.
• متد رندر (widget) ، ابزارک HTML را خروجی می دهد و هر کاری را که مختص نمونه ابزارک است انجام می دهد.
• ویرایشگر فرم (form) ، به کاربر امکان می دهد گزینه های ابزارک را به روز کند.
• به روزرسانی ابزارک (update) گزینه های ارسالی را از فرم گرفته و آنها را ذخیره می کند.

class Wunderground_Widget extends WP_Widget {

    public function __construct() {

    }



    public function widget( $args, $instance ) {

    }



    public function update( $new_instance, $old_instance ) {

    }



    public function form( $instance ) {

    }

}

سازنده

متد __construct  به سادگی نیاز به فراخوانی والد WP_Widget __construction روش و انتقال برخی از مقادیر اساسی پیکربندی دارد. اولین شناسه ابزارک است و به دنبال آن نام ویجت و یک آرایه اختیاری است. از آرایه می توان برای تعیین توصیف یا کلاس پیش فرض استفاده کرد.

public function __construct() {
    parent::__construct(
        'wunderground_widget',
        'Wunderground Widget',
        array( 'description' => 'A Widget for displaying the current weather using the Wunderground API' ) 
    );
}

فرم

برای پیکربندی ابزارک باید بتوانیم برخی از مقادیر پیکربندی نمونه مانند کلید API ، مکانی را که می خواهیم نمایش دهیم و عنوان ابزارک را ذخیره کنیم. برای انجام این کار از توابع get_field_id (مستند نیست ، اما آنجاست!) و  get_field_name برای کمک به ارائه عناصر ورودی استفاده می کنیم. متد فرم همچنین یک پارامتر $instance دارد. این پارامتر شامل مقادیر پیکربندی فعلی ابزارک است.

public function form( $instance ) {
    if ( isset( $instance[ 'title' ] ) ) {
        $title = $instance[ 'title' ];
    }
    else {
        $title = 'New title';
    }
    
    if ( isset( $instance[ 'api_key' ] ) ) {
        $api_key = $instance[ 'api_key' ];
    }
    else {
        $api_key = '';
    }
    
    if ( isset( $instance[ 'location' ] ) ) {
        $location = $instance[ 'location' ];
    }
    else {
        $location = '';
    }
    ?>
    <p>
    <label for="<?php echo $this->get_field_id( 'location' ); ?>"><?php _e( 'Location:' ); ?></label> 
    <input class="widefat" id="<?php echo $this->get_field_id( 'location' ); ?>" name="<?php echo $this->get_field_name( 'location' ); ?>" type="text" value="<?php echo esc_attr( $location ); ?>" />
    
    <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
    <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
    
    <label for="<?php echo $this->get_field_id( 'api_key' ); ?>"><?php _e( 'API Key:' ); ?></label> 
    <input class="widefat" id="<?php echo $this->get_field_id( 'api_key' ); ?>" name="<?php echo $this->get_field_name( 'api_key' ); ?>" type="text" value="<?php echo esc_attr( $api_key ); ?>" />        
    </p>
    <?php 
}

به روز رسانی

از عملکرد بروزرسانی برای ذخیره پیکربندی ابزارک استفاده می شود. تمام کاری که ما باید انجام دهیم این است که مقادیر جدید را از پارامتر $new_instance بیرون بیاوریم و یک آرایه تمیز را برگردانیم. ما برای حذف عناصر ناخواسته HTML از تابع strip_tags استفاده می کنیم.

public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = strip_tags( $new_instance['title'] );
    $instance['api_key'] = strip_tags( $new_instance['api_key'] );
    $instance['location'] = strip_tags( $new_instance['location'] );
    return $instance;
}

ارائه ابزارک (RENDERING)

اکنون که ابزارک پیکربندی شده ای داریم که می توانیم رندر آن را بررسی کنیم ، اینجاست که تابع widget وارد می شود. تابع widget در 2 پارامتر آرگومان ها و مقادیر نمونه را می گیرد. اولین کاری که باید انجام دهیم این است که کلید API ، مکان و مقادیر عنوان را بیرون بکشیم. در این مرحله ما همچنین می خواهیم ابزارک CSS خود را با استفاده از توابع wp_register_style و wp_enqueue_style  ثبت و احصا کنیم.

همانطور که قبلاً اشاره کردم استفاده از WI Wunderground بسیار آسان است. این یک درخواست ساده GET به آدرس اینترنتی API شامل کلید API ، ویژگی ها ، مکان و قالب مورد نظر شماست. برای این ابزارک باید ویژگی های  forecast و conditions  را بدست آوریم. با هر ویژگی که می خواهید به عنوان یک پوشه جداگانه در URI رفتار می شود. تاکنون URI ما به این شکل است:

http://api.wunderground.com/api/<API KEY>/conditions/forecast/

بعد query واقعی خود را اضافه می کنیم ، این کار با اضافه کردن مسیر /q/ folder به URI و سپس اضافه کردن مکان مشخص شده در تنظیمات و نوع قالب به عنوان پسوند انجام می شود. برای این ما از JSON استفاده خواهیم کرد ، اما شما همچنین می توانید از Xml استفاده کنید. یکی از نکات مهم در مورد نحوه پیکربندی Wunderground در قسمت URI این است که می توانید مکانی مانند "دوبلین ، ایرلند" ، مختصات GPS مانند "53.2833229 ، -6.4250272" یا حتی یک جستجوی موقعیت مکانی موقعیتی را تعیین کنید (autoip.json?geo_ip=<IP ADDRESS>). می توانید با استفاده از متغیر $_SERVER و مقدار REMOTE_ADDR سعی کنید هوا را برای مکان فعلی کاربران بدست آورید.

http://api.wunderground.com/api/<API KEY>/conditions/forecast/q/<LOCATION>.json

برای ایجاد درخواست ، ما به سادگی URI را به تابع   wp_remote_get منتقل کرده و بدنه نتیجه را تجزیه کرده و با استفاده از json_decode آن را به یک شی تبدیل می کنیم.

public function widget( $args, $instance ) {
    extract( $args );
    $title = apply_filters( 'widget_title', $instance['title'] );
    $api_key = $instance['api_key'];
    $location = $instance['location'];
    
    wp_register_style('wunderground-style', plugins_url('wunderground/wunderground.css', dirname(__FILE__)));
    wp_enqueue_style('wunderground-style');
         
    $api_url = 'http://api.wunderground.com/api/'.$api_key.'/conditions/forecast/q/'.$location.'.json';
    $response = wp_remote_get( $api_url );
    
    $wunderground = json_decode($response['body']);
}

PARSING JSON

از آنجا که ما اکنون شی J JSON خود را داریم ، می توانیم آن را تجزیه و تحلیل کنیم تا ابزارک خود را پر کنیم. آب و هوای فعلی در خاصیت current_observation قرار دارد. این جایی است که می توانیم مکان ، دما ، سرعت / جهت باد و رطوبت را بدست آوریم.

$current = $wunderground->{'current_observation'};
$location = $current->{'display_location'}->{'full'};
$temp = $current->{'feelslike_c'};
$wind = $current->{'wind_kph'};
$wind_dir = $current->{'wind_dir'};
$humidity = $current->{'relative_humidity'};
$summary = $current->{'weather'};

پیش بینی در ویژگی forecast قرار دارد. این کمی پیچیده تر است ، زیرا ما مجبوریم چند سطح پایین تر برویم تا اطلاعات مورد نظر خود را بدست آوریم. ویژگی forecast شامل یک شی دیگر است ، txt_forecast ، که سپس شامل روز پیش بینی و در نهایت آرایه ای از پیش بینی ها برای 24 ساعت آینده است. ما برای این ابزارک فقط به اولین پیش بینی علاقه مند هستیم (این ابزارک اساساً برای پیش بینی فعلی است).

$forecast = $wunderground->{'forecast'}->{'txt_forecast'}->{'forecastday'}[0];
$icon = $forecast->{'icon'};
$icon_url = $forecast->{'icon_url'};
$text = $forecast->{'fcttext_metric'};

اکنون که همه مقادیر مورد نیاز را داریم ، می توانیم HTML خود را شروع کنیم.

<div>                
    <div class="temp"><?php echo $temp ?>°C <img src="<?php echo $icon_url ?>" alt="<?php echo $icon ?>"/></div>
    <div class="location"><?php echo $location ?></div>
    <div class="wind">Wind: <?php echo $wind ?>kph (<?php echo $wind_dir ?>)</div>
    <div class="humidity">Humidity: <?php echo $humidity ?></div>
    <div class="summary" title="<?php echo $text ?>">Summary: <?php echo $summary ?></div>
</div>

برای ثبت واقعی ابزارک ، باید از widgets_init action برای فراخوانی یک تابع استفاده کنیم تا به نوبه خود با تابع  register_widget فراخوانی شود.

function wunderground_widgets_init(){
    register_widget( 'Wunderground_Widget' );
}
add_action( 'widgets_init', 'wunderground_widgets_init' );

تغییر ظاهر ابزارک

تغییر ظاهر ابزارک بصورت گوشه های گرد. این را در برنامه های مختلف تلفن همراه خواهید دید و فکر می کنم کاملاً خوب کار می کند. برای دستیابی به این هدف ، به سادگی مقادیر شعاع مرزی را برای گوشه های بالا سمت راست و پایین سمت چپ ویجت تنظیم می کنید.

div.wunderground-widget  > div{
    -moz-border-radius-topright: 55px;
    -webkit-border-top-right-radius: 55px;
    border-top-right-radius: 55px;
    -moz-border-radius-bottomleft: 55px;
    -webkit-border-bottom-left-radius: 55px;
    border-bottom-left-radius: 55px;
}

سپس برخی از رنگ ها را تغییر دادم و اندازه بزرگ قلم(فونت) را برای دما و یک اندازه متوسط را برای مکان تعیین کردم. این موارد باعث تمرکز روی قسمت ابزارک می شود که خواندن آن را آسان تر می کند. CSS کامل به این شکل است.

div.wunderground-widget  > div{
    height: 200px;
    max-width: 200px;
    background-color: #59aad4;
    color: #ffffff;
    font-size: 14px;
    -moz-border-radius-topright: 55px;
    -webkit-border-top-right-radius: 55px;
    border-top-right-radius: 55px;
    -moz-border-radius-bottomleft: 55px;
    -webkit-border-bottom-left-radius: 55px;
    border-bottom-left-radius: 55px;
    padding: 0 15px;
}

div.wunderground-widget div.temp{
    font-size: 40px;
}

div.wunderground-widget div.temp img{
    vertical-align: middle;
}

div.wunderground-widget div.location{
    font-size: 20px;
    font-weight: light;
}